<template>
    <div class="index-box">
        <CourseView v-if="showVisable == 0" @update-show-visable="updateShowVisable" />
        <TeacherView v-if="showVisable == 1" :courseId="currentCourseId" @update-show-visable="updateShowVisable" />
        <div class="class-detail" v-if="showVisable == 2">
            <div class="tops-btn">
                <div class="tabs">
                    <div class="tab-item" :class="{ active : tabItem == 0 }" @click="tabClick(0,'课程详情')">课程详情</div>
                    <div class="tab-item" :class="{ active : tabItem == 1 }" @click="tabClick(1,'课程学习')">备课</div>
                    <div class="tab-item" :class="{ active : tabItem == 2 }" @click="tabClick(2,'知识图谱')">课程图谱</div>
                    <div class="tab-item" :class="{ active : tabItem == 3 }" @click="tabClick(3,'课程作业')">教材/图书</div>
                </div>
                <div class="back-btn" @click="backIndex">返回</div>
            </div>
            <ClassDetail v-if="tabItem == 0" @update-show-visable="updateShowVisable" />
            <PreparationView v-if="tabItem == 1" @update-show-visable="updateShowVisable" />
            <ClassGraph v-if="tabItem == 2" @update-show-visable="updateShowVisable" />
            <BookView v-if="tabItem == 3 && !bookGraphVisable" @update-show-visable="updatebookGraphVisable" />
            <BookGraph v-if="tabItem == 3 && bookGraphVisable" @update-show-visable="updatebookGraphVisable" />
        </div>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    import CourseView from '@/components/admin/CourseView.vue'
    import TeacherView from '@/components/admin/TeacherView.vue'
    import ClassDetail from '@/components/admin/ClassDetail.vue'
    import PreparationView from '@/components/admin/PreparationView.vue'
    import ClassGraph from '@/components/admin/ClassGraph.vue'
    import BookView from '@/components/admin/BookView.vue'
    import BookGraph from '@/components/admin/BookGraph.vue'
    const showVisable = ref(0);
    const currentCourseId = ref(null);
    const bookGraphVisable = ref(false);
    const updateShowVisable = (value, courseId = null) => {
        showVisable.value = value;
        if (courseId) {
            currentCourseId.value = courseId;
        }
    }
    const updatebookGraphVisable = (value) => {
        bookGraphVisable.value = value
    }
    const  tabItem = ref(0)
    const tabClick = (index) => {
        tabItem.value = index
    }
    const backIndex = () => {
        showVisable.value = 0
        currentCourseId.value = null
    }
</script>
<style scoped>
    .index-box{position: relative;}
    .class-detail{width: 100%;border-radius: 8px;height: calc(85vh + 20px); }
    .tabs{display: flex;flex-direction: row;justify-content: start;gap: 5px;}
    .tabs .tab-item{background: #fff;width: 100px;text-align: center;height: 35px;line-height: 35px;border-top-left-radius: 10px;border-top-right-radius: 10px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 16px;cursor: pointer;}
    .tab-item.active{background: #1465E1;color: #fff;}
    .tops-btn{display: flex;flex-direction: row;justify-content: space-between;}
    .back-btn{display: block;width: 60px;height: 20px;color: #888;border:1px solid #888;text-align: center;line-height: 20px;font-family: 微软雅黑, Microsoft YaHei, SimSun;font-size: 12px;border-radius: 4px;cursor: pointer;margin: 0 20px 0 0; }
</style>